<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head th:fragment="header-include">
    <!-- META TAGS -->
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>

    <title>GachNoi.Net</title>

    <link rel="shortcut icon" href="/images/favicon.png"/>


    <!-- Google Web Fonts-->
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800'
          rel='stylesheet' type='text/css'/>
    <link href='http://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'/>
    <link href='http://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic,700italic' rel='stylesheet'
          type='text/css'/>

    <!-- Style Sheet-->
    <link rel='stylesheet' id='bootstrap-css-css' href='/css/bootstrap.css?ver=1.0' type='text/css' media='all'/>
    <link rel='stylesheet' id='responsive-css-css' href='/css/responsive.css?ver=1.0' type='text/css' media='all'/>
    <link rel='stylesheet' id='pretty-photo-css-css' href='/js/prettyphoto/prettyPhoto.css?ver=3.1.4' type='text/css' media='all'/>
    <link rel='stylesheet' id='main-css-css' href='/css/main.css?ver=1.0' type='text/css' media='all'/>
    <link rel='stylesheet' id='red-skin-css' href='/css/red-skin.css?ver=1.0' type='text/css' media='all'/>

    <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
    <script type="text/javascript" src="/js/html5.js"></script>
    <![endif]-->

    <a href="#top" id="scroll-top"></a>

    <!-- script -->
    <script type='text/javascript' src='/js/jquery-1.8.3.min.js'></script>
    <script type='text/javascript' src='/js/jquery.easing.1.3.js'></script>
    <script type='text/javascript' src='/js/prettyphoto/jquery.prettyPhoto.js'></script>
    <script type='text/javascript' src='/js/jflickrfeed.js'></script>
    <script type='text/javascript' src='/js/jquery.liveSearch.js'></script>
    <script type='text/javascript' src='/js/jquery.form.js'></script>
    <script type='text/javascript' src='/js/jquery.validate.min.js'></script>
    <script type='text/javascript' src='/js/custom.js'></script>
</head>

<div class="header-wrapper" th:fragment="header">
    <header>
        <div class="container">
            <div class="logo-container">
                <a href="index.html" title="Knowledge Gate">
                    <img src="/images/logo.png" alt="Knowledge Base Theme"/>
                </a>
                <span class="tag-line" th:text="#{header.slogan}">We provide one convenient way to find knowledge</span>
            </div>

            <nav class="main-nav">
                <div class="menu-top-menu-container">
                    <ul id="menu-top-menu" class="clearfix">
                        <li class="current-menu-item"><a href="/index.html" th:text="#{menu.home}">Home</a></li>
                        <li><a href="#" th:text="#{menu.admin}">Admin</a>
                            <ul class="sub-menu">
                                <li><a href="/admin/new-article.html" th:text="#{menu.admin.new_article}">New Article</a></li>
                                <li><a href="/admin/my-articles.html" th:text="#{menu.admin.my_articles}">My Articles</a></li>
                            </ul>
                        </li>
                        <li><a href="/categories.html" th:text="#{menu.categories}">Categories</a></li>
                        <li><a href="/faq.html" th:text="#{menu.faq}">FAQ</a></li>
                        <li><a href="/contact.html" th:text="#{menu.contact}">Contact</a></li>
                        <li><a href="#" th:text="#{menu.language}">Language</a>
                            <ul class="sub-menu">
                                <li><a href="/index.html?ln=en_US" th:text="#{menu.language.en}">English</a></li>
                                <li><a href="/index.html?ln=vi_VN" th:text="#{menu.language.vi}">Vietnamese</a></li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </nav>
        </div>
    </header>
</div>

<body>

<div id="main">
    <p>The page content should be here</p>
</div>

<div class="search-area-wrapper" th:fragment="search">
    <div class="search-area container">
        <h3 class="search-header" th:text="#{search.title}">Find an Article?</h3>

        <p class="search-tag-line" th:text="#{search.hint}">If you have any comments/hints, you can search below or enter what you are looking for!</p>

        <form id="search-form" class="search-form clearfix" method="get" action="#" autocomplete="off">
            <input class="search-term required" type="text" id="s" name="s"
                   placeholder="Type your search terms here"
                   title="* Please enter a search term!"/>
            <input class="search-btn" type="submit" value="Search"/>

            <div id="search-error-container"></div>
        </form>
    </div>
</div>

<footer id="footer-wrapper" th:fragment="footer">
    <div id="footer" class="container">
        <div class="row">

            <div class="span3">
                <section class="widget">
                    <h3 class="title" th:text="#{how.title}">How it works</h3>

                    <div class="textwidget" th:text="#{how.description}">
                        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod
                            tincidunt ut laoreet dolore magna aliquam erat volutpat. </p>

                        <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl
                            ut aliquip ex ea commodo consequat. </p>
                    </div>
                </section>
            </div>

            <div class="span3">
                <section class="widget"><h3 class="title">Categories</h3>
                    <ul>
                        <li><a href="#" title="Lorem ipsum dolor sit amet,">Advanced Techniques</a></li>
                        <li><a href="#" title="Lorem ipsum dolor sit amet,">Designing in WordPress</a></li>
                        <li><a href="#" title="Lorem ipsum dolor sit amet,">Server &amp; Database</a></li>
                        <li><a href="#" title="Lorem ipsum dolor sit amet, ">Theme Development</a></li>
                        <li><a href="#" title="Lorem ipsum dolor sit amet,">Website Dev</a></li>
                        <li><a href="#" title="Lorem ipsum dolor sit amet,">WordPress for Beginners</a></li>
                        <li><a href="#" title="Lorem ipsum dolor sit amet, ">WordPress Plugins</a></li>
                    </ul>
                </section>
            </div>

            <div class="span3">
                <section class="widget">
                    <h3 class="title">Latest Tweets</h3>

                    <div id="twitter_update_list">
                        <ul>
                            <li>No Tweets loaded !</li>
                        </ul>
                    </div>
                </section>
            </div>

            <div class="span3">
                <section class="widget">
                    <h3 class="title">Flickr Photos</h3>

                    <div class="flickr-photos" id="basicuse">
                    </div>
                </section>
            </div>

        </div>
    </div>
    <div id="footer-bottom-wrapper">
        <div id="footer-bottom" class="container">
            <div class="row">
                <div class="span6">
                    <p class="copyright" th:text="#{footer.title}">
                        Copyright © 2013. All Rights Reserved by GachNoi.NET.
                    </p>
                </div>
                <div class="span6">
                    <ul class="social-nav clearfix">
                        <li class="linkedin"><a target="_blank" href="#"></a></li>
                        <li class="stumble"><a target="_blank" href="#"></a></li>
                        <li class="google"><a target="_blank" href="#"></a></li>
                        <li class="deviantart"><a target="_blank" href="#"></a></li>
                        <li class="flickr"><a target="_blank" href="#"></a></li>
                        <li class="skype"><a target="_blank" href="skype:#?call"></a></li>
                        <li class="rss"><a target="_blank" href="#"></a></li>
                        <li class="twitter"><a target="_blank" href="#"></a></li>
                        <li class="facebook"><a target="_blank" href="#"></a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</footer>

<aside class="span4 page-sidebar" th:fragment="sidebar">

    <section class="widget">
        <div class="support-widget">
            <h3 class="title" th:text="#{support.title}">Support</h3>

            <p class="intro" th:utext="#{support.description}">Need more support? If you did not found an answer, <a href="contact.html">contact</a> us for further
                help.</p>
        </div>
    </section>

    <section class="widget">
        <h3 class="title" th:text="#{latest.title}">Latest Articles</h3>
        <ul class="articles">
            <li class="article-entry standard">
                <h4><a href="article.html">Integrating WordPress with Your Website</a></h4>
                            <span class="article-meta">25 Feb, 2013 in <a href="#"
                                                                          title="View all posts in Server &amp; Database">Server
                                &amp; Database</a></span>
                <span class="like-count">66</span>
            </li>
            <li class="article-entry standard">
                <h4><a href="article.html">WordPress Site Maintenance</a></h4>
                            <span class="article-meta">24 Feb, 2013 in <a href="#"
                                                                          title="View all posts in Website Dev">Website
                                Dev</a></span>
                <span class="like-count">15</span>
            </li>
            <li class="article-entry video">
                <h4><a href="article.html">Meta Tags in WordPress</a></h4>
                            <span class="article-meta">23 Feb, 2013 in <a href="#"
                                                                          title="View all posts in Website Dev">Website
                                Dev</a></span>
                <span class="like-count">8</span>
            </li>
            <li class="article-entry image">
                <h4><a href="article.html">WordPress in Your Language</a></h4>
                            <span class="article-meta">22 Feb, 2013 in <a href="#"
                                                                          title="View all posts in Advanced Techniques">Advanced
                                Techniques</a></span>
                <span class="like-count">6</span>
            </li>
        </ul>
    </section>
</aside>

</body>
</html>

